<!-- HTML5VideoPlayer.html -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>百度云视频播放器</title>
	<style type="text/css">
		html,body{
			padding: 0;
			margin: 0;
			background-color: rgba(0,0,0,0);
		}
		.player_div{
			background-color: black;
		}
		.close_a{
			position: absolute;
			top: 22px;
			right: 0;
			width: 34px;
			height: 34px;
			background-color: rgba(0,0,0,0.3);
			z-index: 99;
		}
		.close_img{
			margin-top: 10px;
			margin-left: 10px;
			width: 14px;
		}
		.player_div{
			margin-top: 22px;
			/*width: 100%;
			height: 260px;*/
		}
		.video-cell{
			width: 100%;
			height: 214px;
		}
		.ios-video-cell{
			width: 100%;
			height: 214px;
		}
		.video-cell::-webkit-media-controls-enclosure {
	        overflow:hidden;
	    }
	    .video-cell::-webkit-media-controls-panel {
	        width: calc(100% + 30px);
	    }
	    .ios-video-cell::-webkit-media-controls-panel {
	        width: calc(100%);
	    }
	</style>
</head>
<body>
	<a href="#" class="close_a" onclick="onCloseClick()">
		<img src="../../image/close_video.png" class="close_img">
	</a>
	<!-- <div class="player_div prism-player" id="J_prismPlayer">
	</div> -->
	<div class="player_div" id="HTML5_Player">
		<!-- <video class="ios-video-cell" controls="controls" preload="auto">
		  	<source src="http://cfnetvideo.cfnet.org.cn/media/bizs/1/2014/04/04/141396604406-3-2.mp4" type="video/mp4" />
		</video> -->
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/databaseOperation.js"></script>
<script type="text/javascript" src="../../script/study_courseTimeRecord.js"></script>
<script type="text/javascript">
	var isFullScreen = false;
	var isStuMooc = false;
	DBReady = function(){
		var param = api.pageParam;
		var image = param.image;
		if (image == null) {
			image = '';
		}
		if (api.pageParam.isStuMooc != null) {
			isStuMooc = true;
		}
	 // 	var width = api.winWidth;
		// var height = width * 3 / 4;
		// $('.player_div').attr('style', 'width:'+width+'; height:'+height+';');
		var videoHtml = videoHtmlString(param.videoUrl);
		$('#HTML5_Player').html(videoHtml);
	}
	function videoHtmlString(videoUrl){
		var systemType = api.systemType;
		if (systemType == 'ios') {
			return '<video id="h5_video" onwebkitfullscreenchange="onFullScreen()" class="ios-video-cell" controls="controls" autoplay="autoplay">'+
				  	'<source src="'+videoUrl+'" type="video/mp4" />'+
				'</video>';
		}
		return 	'<video id="h5_video" onwebkitfullscreenchange="onFullScreen()" class="video-cell" controls="controls" autoplay="autoplay">'+
				  	'<source src="'+videoUrl+'" type="video/mp4" />'+
				'</video>';
	}
	function onFullScreen(){
		var systemType = api.systemType;
		if (systemType != 'ios') {
			if (isFullScreen == true) {//准备缩小
				api.setScreenOrientation({orientation:"portrait_up"});
				isFullScreen = false;
			}else{//准备全屏
				api.setScreenOrientation({orientation:"auto"});
				isFullScreen = true;
			}
		}
	}
	function onCloseClick(){
		if (isStuMooc == true) {
			study_courseTimeRecordFun(api.pageParam.playParam, 'NONE', 'true');
		}
		api.closeFrame();
	}
</script>
</html>